<template>
    <div>
        <el-table
        :data="tableData"
        border
        style="width:90%">
        <el-table-column
          tpye="radio"
          label="选择"
          align="center"
          width="180">
          <template slot-scope="scope">
                   <el-radio :label="scope.row.date" @change="handelChange(scope.$index,scope.row)" v-model="radilVal">&nbsp;</el-radio>
          </template>
        </el-table-column>
        <el-table-column
        align="center"
          prop="date"
          label="用户编号"
          width="180">
        </el-table-column>
        <el-table-column
        align="center"
          prop="name"
          label="用户名称"
          width="180">
        </el-table-column>
        <el-table-column
        align="center"
          prop="address"
          label="市(州)公司"
          width="180"
          >
        </el-table-column>
          <el-table-column   
          align="center"
          prop="status"
          label="状态">
          </el-table-column>
          <el-table-column
          align="center"
           prop="address"
          label="最大可负荷(万kW)">
          </el-table-column>
      </el-table>
      <div>单选:{{dataVal}}</div>

      <el-table
         class="table-all"
        :data="tableData"
         border
         ref="selectRef"
         @select="select"
       
        style="width:90%">
        <!-- @selection-change="handleSelectChange" -->
        <el-table-column
          align="center"
          type="selection"
          width="180">
        </el-table-column>
        <el-table-column
          align="center"
          prop="date"
          label="用户编号"
          width="180">
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="用户名称"
          width="180">
        </el-table-column>
        <el-table-column
          align="center"
          prop="address"
          label="市(州)公司"
          width="180"
          >
        </el-table-column>
          <el-table-column
            align="center"
            prop="status"
            label="状态">
          </el-table-column>
          <el-table-column
          align="center"
           prop="address"
           label="最大可负荷(万kW)">
          </el-table-column>
      </el-table>
      <div>单选  {{listRowVal}}</div>
      <el-button @click="dataGroup">数据组合</el-button>
    </div>
</template>

<script>
export default {
  data() {
    return {
      dataVal: null,
      radilVal: "",
      tableData: [
        {
          date: "1212132323",
          name: "用户1",
          address: "安徽省合肥市",
          status: "很好"
        },
        {
          date: "45453565667",
          name: "用户2",
          address: "安徽省合肥市",
          status: "优秀"
        },
        {
          date: "2673435454",
          name: "用户3",
          address: "安徽省合肥市",
          status: "不良"
        },
        {
          date: "7664545454",
          name: "用户4",
          address: "安徽省合肥市",
          status: "优秀"
        }
      ],
      listRowVal: null
    };
  },
  methods: {
    //数据组装
    dataGroup() {
      let option = {
        series: [
          {
            name: "朱浩然1",
            data: [1, 2, 3, 4, 6, 7, 8, 12, 2, 3]
          },
          {
            name: "朱浩然2",
            data: [8, 26, 2, 4, 6, 6, 8]
          }
        ]
      };
      let array1 = option.series;
      array1.forEach((item, index) => {
        if (item.name == "朱浩然1") {
          array1[index].data = [8, 8, 8, 8, 8, 8, 8];
        }
      });

      console.log(array1);
    },

    //单选
    handelChange(index, data) {
      this.dataVal = data;
    },
    //多选
    // handleSelectChange(val) {
    //   if (val.length > 1) {
    //     this.$refs.selectRef.clearSelection();
    //     this.$refs.selectRef.toggleRowSelection(val.pop());
    //   } else {
    //     this.listRowVal = val[0] || {};
    //   }
    //   console.log(this.listRowVal);
    // },
    //单选采用这种方式
    select(selection, row) {
      //   console.log(row);
      this.listRowVal = row;
      this.$refs.selectRef.clearSelection();
      if (selection.length == 0) {
        this.listRowVal = null;
        return;
      }
      this.$refs.selectRef.toggleRowSelection(row, true);
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/ .table-all thead .el-table-column--selection .cell {
  display: none;
}
</style>
